<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2020/9/23
  Time: 19:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2020/9/23
  Time: 9:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Cart</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/Calculation.js"></script>


    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/jd.css"/>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content=""/>

    <!-- Custom Theme files -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/menu.css" rel="stylesheet" type="text/css" media="all" /> <!-- menu style -->
    <link href="css/ken-burns.css" rel="stylesheet" type="text/css" media="all" /> <!-- banner slider -->
    <link href="css/animate.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all"> <!-- carousel slider -->
    <!-- //Custom Theme files -->
    <!-- font-awesome icons -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <!-- js -->
    <!-- //js -->
    <!-- web-fonts -->
    <link href='http://fonts.useso.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Offside' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
    <!-- web-fonts -->
    <script src="js/owl.carousel.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <%--    <script>--%>
    <%--        $(document).ready(function() {--%>
    <%--            $("#owl-demo").owlCarousel({--%>
    <%--                autoPlay: 3000, //Set AutoPlay to 3 seconds--%>
    <%--                items :4,--%>
    <%--                itemsDesktop : [640,5],--%>
    <%--                itemsDesktopSmall : [480,2],--%>
    <%--                navigation : true--%>

    <%--            });--%>
    <%--        });--%>
    <%--    </script>--%>
    <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            // Dock the header to the top of the window when scrolled past the banner. This is the default behaviour.

            $('.header-two').scrollToFixed();
            // previous summary up the page.

            var summaries = $('.summary');
            summaries.each(function(i) {
                var summary = $(summaries[i]);
                var next = summaries[i + 1];

                summary.scrollToFixed({
                    marginTop: $('.header-two').outerHeight(true) + 10,
                    zIndex: 999
                });
            });
        });
    </script>
    <!-- start-smooth-scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });
    </script>
    <!-- //end-smooth-scrolling -->
    <!-- smooth-scrolling-of-move-up -->
    <script type="text/javascript">
        $(document).ready(function() {

            var defaults = {
                containerID: 'toTop', // fading element id
                containerHoverID: 'toTopHover', // fading element hover id
                scrollSpeed: 1200,
                easingType: 'linear'
            };

            $().UItoTop({ easingType: 'easeOutQuart' });

        });
    </script>
    <!-- //smooth-scrolling-of-move-up -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            //jquery特效制作复选框全选反选取消(无插件)
            // 全选
            $(".allselect").click(function () {

                if($(this).attr("checked")){
                    $(".gwc_tb2 input[name=newslist]").each(function () {
                        $(this).attr("checked", true);
                        // $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
                    });
                    GetCount();

                }
                else
                {
                    $(".gwc_tb2 input[name=newslist]").each(function () {
                        if ($(this).attr("checked")) {
                            $(this).attr("checked", false);
                            //$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
                        } else {
                            $(this).attr("checked", true);
                            //$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
                        }
                    });
                    GetCount();

                }

            });

            //反选
            $("#invert").click(function () {
                $(".gwc_tb2 input[name=newslist]").each(function () {
                    if ($(this).attr("checked")) {
                        $(this).attr("checked", false);
                        //$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
                    } else {
                        $(this).attr("checked", true);
                        //$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
                    }
                });
                GetCount();
            });

            //取消
            $("#cancel").click(function () {
                $(".gwc_tb2 input[name=newslist]").each(function () {
                    $(this).attr("checked", false);
                    // $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
                });
                GetCount();
            });

            // 所有复选(:checkbox)框点击事件
            $(".gwc_tb2 input[name=newslist]").click(function () {
                if ($(this).attr("checked")) {
                    //$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
                } else {
                    // $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
                }
            });

            // 输出
            $(".gwc_tb2 input[name=newslist]").click(function () {
                // $("#total2").html() = GetCount($(this));
                GetCount();
                //alert(conts);
            });
        });
        //******************
        function GetCount() {
            var conts = 0;
            var aa = 0;
            $(".gwc_tb2 input[name=newslist]").each(function () {
                if ($(this).attr("checked")) {
                    for (var i = 0; i<$(this).length; i++) {
                        conts += parseInt($(this).val());
                        aa += 1;
                    }
                }
            });
            $("#shuliang").text(aa);
            $("#zong1").html((conts).toFixed(2));
            $("#jz1").css("display", "none");
            $("#jz2").css("display", "block");
        }
    </script>



</head>
<body>

<!--导航开始-->


<script>
    $('#myModal88').modal('show');
</script>
<!-- header -->
<div class="header">
    <div class="w3ls-header"><!--header-one-->
        <div class="w3ls-header-left">
            <p><a href="#">UPTO $50 OFF ON LAPTOPS | USE COUPON CODE LAPPY </a></p>
        </div>
        <div class="w3ls-header-right">
            <ul>
                <li class="dropdown head-dpdn">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user" aria-hidden="true"></i> My Account<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="login.html">Login </a></li>
                        <li><a href="signup.html">Sign Up</a></li>
                        <li><a href="login.html">My Orders</a></li>
                        <li><a href="login.html">Wallet</a></li>
                    </ul>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-percent" aria-hidden="true"></i> Today's Deals<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="offers.html">Cash Back Offers</a></li>
                        <li><a href="offers.html">Product Discounts</a></li>
                        <li><a href="offers.html">Special Offers</a></li>
                    </ul>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gift" aria-hidden="true"></i> Gift Cards<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="offers.html">Product Gift card</a></li>
                        <li><a href="offers.html">Occasions Register</a></li>
                        <li><a href="offers.html">View Balance</a></li>
                    </ul>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="contact.html" class="dropdown-toggle"><i class="fa fa-map-marker" aria-hidden="true"></i> Store Finder</a>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="card.html" class="dropdown-toggle"><i class="fa fa-credit-card-alt" aria-hidden="true"></i> Credit Card</a>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="help.html" class="dropdown-toggle"><i class="fa fa-question-circle" aria-hidden="true"></i> Help</a>
                </li>
            </ul>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!--导航结束-->


<div class="gwc" style=" margin:auto;">
    <table cellpadding="0" cellspacing="0" class="gwc_tb1">
        <tr>
            <td class="tb1_td1"><input id="Checkbox1" type="checkbox"  class="allselect"/></td>
            <td class="tb1_td1">全选</td>
            <td class="tb1_td3">商品</td>
            <td class="tb1_td4">商品信息</td>
            <td class="tb1_td5">数量</td>
            <td class="tb1_td6">单价</td>
            <td class="tb1_td7">操作</td>
        </tr>
    </table>

    <!---商品加减算总数---->
    <script type="text/javascript">
        $(function () {
            var t = $("#text_box1");
            $("#add1").click(function () {
                t.val(parseInt(t.val()) + 1)
                setTotal(); GetCount();
            })
            $("#min1").click(function () {
                if(t.val()>0){
                    t.val(parseInt(t.val()) - 1)
                    setTotal(); GetCount();
                }
            })
            function setTotal() {

                $("#total1").html((parseInt(t.val()) * 9).toFixed(2));
                $("#newslist-1").val(parseInt(t.val()) * 9);
            }
            setTotal();
        })
    </script>

    <table cellpadding="0" cellspacing="0" class="gwc_tb2">
        <tr>
            <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
            <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
            <td class="tb2_td3"><a href="#">产品标题</a></td>
            <td class="tb1_td4">一件</td>
            <td class="tb1_td5">
                <input id="min1" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input id="text_box1" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                <input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </td>
            <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
            <td class="tb1_td7"><a href="#">删除</a></td>
        </tr>
    </table>

    <!---商品加减算总数---->
    <script type="text/javascript">
        $(function () {
            var t = $("#text_box2");
            $("#add2").click(function () {
                t.val(parseInt(t.val()) + 1)
                setTotal(); GetCount();
            })
            $("#min2").click(function () {
                if(t.val()>0){
                    t.val(parseInt(t.val()) - 1)
                    setTotal(); GetCount();
                }
            })
            function setTotal() {

                $("#total2").html((parseInt(t.val()) * 8).toFixed(2));
                $("#newslist-2").val(parseInt(t.val()) * 8);
            }
            setTotal();
        })
    </script>
    <table cellpadding="0" cellspacing="0" class="gwc_tb2">
        <tr>
            <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
            <td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
            <td class="tb2_td3"><a href="#">产品标题</a></td>
            <td class="tb1_td4">一件</td>
            <td class="tb1_td5">
                <input id="min2" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input id="text_box2" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                <input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </td>
            <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
            <td class="tb1_td7"><a href="#">删除</a></td>
        </tr>
    </table>

    <!---总数---->
    <script type="text/javascript">
        $(function () {
            $(".quanxun").click(function () {
                setTotal();
                //alert($(lens[0]).text());
            });
            function setTotal() {
                var len = $(".tot");
                var num = 0;
                for (var i = 0; i<len.length; i++) {
                    num = parseInt(num) + parseInt($(len[i]).text());

                }
                //alert(len.length);
                $("#zong1").text(parseInt(num).toFixed(2));
                $("#shuliang").text(len.length);
            }
            //setTotal();
        })
    </script>
    <table cellpadding="0" cellspacing="0" class="gwc_tb3">
        <tr>
            <td class="tb1_td1">&nbsp;</td>
            <td class="tb1_td1">&nbsp;</td>
            <td class="tb3_td1">&nbsp;</td>
            <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
            <td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></span></td>
            <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</a></td>
        </tr>
    </table>

</div>




</body>


</html>

